<template>
  <div class="boxShadow">
    <div style="margin:20px">
      <el-card style="padding-left: 5%; padding-right: 5%">
        <el-table
          v-for="item in tableData"
          :data="item.TableD"
          :key="item.id"
          border
          class="mt8"
          :header-cell-style="{ background: '#34adfc', color: '#fff' }"
        >
            <el-table-column :label="item.Tab[0].dataName" prop="COLM1"></el-table-column>
            <el-table-column :label="item.Tab[1].dataName" prop="COLM2">
              <template slot-scope="scope">
                <el-radio
                :label="scope.row.COLM2"
                v-model="scope.row.checked"
                @change.native="changeReviewResult(scope.row,scope.row.COLM2)">
                </el-radio>
              </template>
            </el-table-column>
            <el-table-column :label="item.Tab[2].dataName" prop="COLM3">
              <template slot-scope="scope">
                <el-radio
                :label="scope.row.COLM3"
                v-model="scope.row.checked"
                @change.native="changeReviewResult(scope.row,scope.row.COLM3)">
                </el-radio>
              </template>
            </el-table-column>
            <el-table-column :label="item.Tab[3].dataName" prop="COLM4">
              <template slot-scope="scope">
                <el-radio
                :label="scope.row.COLM4"
                v-model="scope.row.checked"
                @change.native="changeReviewResult(scope.row,scope.row.COLM4)">
                </el-radio>
              </template>
            </el-table-column>
            <el-table-column :label="item.Tab[4].dataName" prop="COLM5">
              <template slot-scope="scope">
                <el-radio
                :label="scope.row.COLM5"
                v-model="scope.row.checked"
                @change.native="changeReviewResult(scope.row,scope.row.COLM5)">
                </el-radio>
              </template>
            </el-table-column>
        </el-table>
        <p>总分: {{fraction}} 分</p>
      </el-card>

    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      //分数
      fraction: 0,
      fractionList:[],
      anum: "",
      bnum: "",
      tableData: [
        {
          id: 1,
          Tab: [
            { dataItem: "COLM1", dataName: "在以下情况有无嗜睡的可能性" },
            { dataItem: "COLM2", dataName: "从不（0）" },
            { dataItem: "COLM3", dataName: "很少（1）" },
            { dataItem: "COLM4", dataName: "有时（2）" },
            { dataItem: "COLM5", dataName: "经常（3）" },
          ],
          TableD: [
            {
              COLM1: "坐着阅读时",
              COLM2: "0",
              COLM3: "1",
              COLM4: "2",
              COLM5: "3",
              checked: "",
            },
            {
              COLM1: "看电视时",
              COLM2: "0",
              COLM3: "1",
              COLM4: "2",
              COLM5: "3",
              checked: "",
            },
          ],
        },
      ],
    };
  },
  methods: {
    changeReviewResult() {
      var arr = []
      this.tableData.forEach(item => {
        item.TableD.forEach(col => {
          arr.push(col.checked)
        })
      });
      this.fraction = arr.reduce((prev, cur) => {
        return Number(prev) + Number(cur);
      })
    },
  },
};
</script>
<style scoped>
.gssm {
  margin-left: 10px;
  font-size: 20px;
}
</style>